<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h3")
            div(class="flex-column-item flex-center-center h3") ----闹铃设置----
            div(class="flex-column-item flex-row h3")
                div(class="flex-row-item right",)
                    span(:class="{'active-block': activeId == 0 ? true : false}") {{hour | fixed}}
                div(class="flex-row-item center",style="flex:0") :
                div(class="flex-row-item left")
                    span(:class="{'active-block': activeId == 1 ? true : false}") {{minute | fixed}}
            div(class="flex-column-item center")
                control-select(v-model="ringState", :working="activeId == 2",ref="state")
</template>

<script>
    import Base from '@/mixins/BaseVue';
    export default {
        mixins: [Base],
        data() {
            return {

                hour: window.machine.ring.hour ,
                minute: window.machine.ring.minute ,

                activeId: 0,

                ringState: {
                    value: window.machine.ring.state,
                    options:[
                        {name: '关闭', value: 'closed'},
                        {name: '每日', value: 'every'},
                        {name: '一次', value: 'once'}
                    ],
                    onChange(model){
                        window.machine.ring.state = model.value;
                    }
                }
            };
        },
        methods: {
            up() {
                if (this.activeId == 0) {
                    const hour = parseInt(this.hour);
                    this.hour = hour == 23 ? 0 : hour + 1;
                }
                if (this.activeId == 1) {
                    const minute = parseInt(this.minute);
                    this.minute = minute == 60 ? 0 : minute + 1;
                }
                if (this.activeId == 2) {
                    this.$refs.state.up();
                }

            },
            down() {
                if (this.activeId == 0) {
                    const hour = parseInt(this.hour);
                    this.hour = hour == 0 ? 23 : hour - 1;
                }
                if (this.activeId == 1) {
                    const minute = parseInt(this.minute);
                    this.minute = minute == 0 ? 60 : minute - 1;
                }
                if (this.activeId == 2) {
                    this.$refs.state.down();
                }
            },

            back() {
                window.machine.ring.hour = this.hour;
                window.machine.ring.minute = this.minute;
                this.$router.push({path: 'index', query:{index: 1}});
            },
            yes() {
                window.machine.ring.hour = this.hour;
                window.machine.ring.minute = this.minute;
                this.activeId = this.activeId == 2 ? 0 : this.activeId + 1;
            }
        }
    };
</script>

<style lang="less">
</style>
